<template>
    <div class="user-info">
        <el-card class="box-card carone">
            <div class="text item textone">
                <el-button type="primary">{{$t('msg.userInfo.print')}}</el-button>
            </div>
        </el-card>
        <el-card class="box-card carone">
            <div class="text item">
                <div>
                    <h2 class="title">{{$t('msg.userInfo.title')}}</h2>
                </div>
                <div class="userinfobox">
                    <div class="top">
                        <div class="left">
                            <el-row>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">{{$t('msg.userInfo.name')}}</div>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple-light">
                                        {{infoList.username}}
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">{{$t('msg.userInfo.sex')}}</div>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple-light">
                                        {{infoList.gender}}
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">{{$t('msg.userInfo.nation')}}</div>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple-light">
                                        {{infoList.nationality}}
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">{{$t('msg.userInfo.mobile')}}</div>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple-light">
                                        {{infoList.mobile}}
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">{{$t('msg.userInfo.province')}}</div>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple-light">
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">{{$t('msg.userInfo.date')}}</div>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple-light">{{formatter(infoList.openTime)}}</div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">{{$t('msg.userInfo.remark')}}</div>
                                </el-col>
                                <el-col :span="19">
                                    <div class="grid-content bg-purple-light">
                                        <el-tag size="small" v-for="(item,index) in infoList.remark" :key="index">{{item}}</el-tag>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">{{$t('msg.userInfo.address')}}</div>
                                </el-col>
                                <el-col :span="19">
                                    <div class="grid-content bg-purple-light"> {{infoList.address}}
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="userimg">
                            <el-row>
                                <el-col :span="4">
                                    <img class="img" :src="infoList.avatar" alt="">
                                    <!-- <div class="grid-content bg-purple img">联系信息</div> -->
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="bottom">
                        <el-col :span="24">
                            <div class="grid-content bg-purple">{{$t('msg.userInfo.experience')}}</div>
                        </el-col>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark" style="height:67px">
                                <ul class="experience">
                                    <li><span>{{formatter(infoList.experience[0].startTime)}} ---- {{formatter(infoList.experience[0].endTime)}}</span><span>{{infoList.experience[0].title}}</span><span>{{infoList.experience[0].desc}}</span></li>
                                    <li><span>{{formatter(infoList.experience[1].startTime)}} ---- {{formatter(infoList.experience[1].endTime)}}</span><span>{{infoList.experience[1].title}}</span><span>{{infoList.experience[1].desc}}</span></li>
                                </ul>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="grid-content bg-purple">{{$t('msg.userInfo.major')}}</div>
                        </el-col>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">{{infoList.major}}</div>
                        </el-col>
                        <el-col :span="24">
                            <div class="grid-content bg-purple">{{$t('msg.userInfo.glory')}}</div>
                        </el-col>
                        <el-col :span="24" class="down">
                            <div class="grid-content bg-purple-dark">{{infoList.glory}}</div>
                        </el-col>
                        <div class="foot">{{$t('msg.userInfo.foot')}}</div>

                    </div>

                </div>

            </div>

        </el-card>
    </div>
</template>

<script>
import moment from "moment"
export default {
 name : "", 
 data(){
  return {
      id:'',
      idt:'',
      infoList:''
  }
 },
    computed:{
     listData(){
         return this.$store.getters.language
     }
 },
 watch:{
     listData(val){
         this.changeone()
     }
 },
 created(){
        this.idt = this.$route.params.id
     this.getList1()        
 },
 mounted(){
    // console.log(this.idt);

 },
 components : {
     
 },
 methods:{

    async getList1(){
    this.id = this.idt
    //   console.log(this.idt);
    let res = await this.userApi.getUserInfo(this.id)
    console.log(res);
    this.infoList = res
    console.log(this.infoList.experience[0].endTime);
    },
    changeone(){
        this.getList1()
    },
     formatter(row,column,value){
      return moment.parseZone(value).local().format("YYYY-MM-DD")
    }
}
}
</script>


<style lang="scss" scoped>
.box-card {
  padding: 0 0 18px 0;
  margin-bottom: 22px;
  .textone {
    box-sizing: inherit;
    float: right;
  }

  // background-color: red;
}
.experience {
  list-style: none;
  span {
    margin-right: 62px;
  }
}

.userinfobox {
  width: 1024px;
  margin: 0 auto;

  .top {
    display: flex;
    .left {
      flex: 20;
    }
  }
}
.title {
  text-align: center;
  margin-bottom: 18px;
}
.userimg {
  padding: 27px 20px;
  border: 1px rgb(235, 238, 245) solid;
  flex: 3;
  float: right;
  .img {
    width: 146px;
    height: 170px;
  }
}
.bottom .el-col {
  border-right: 1px rgb(235, 238, 245) solid;
}
.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  //   font-size: ;
}
.down {
  margin-bottom: 42px;
  border-bottom: 1px rgb(235, 238, 245) solid;
}
.foot {
  text-align: right;
}
.bg-purple {
  //   background: rgb(250, 250, 250);
  background-color: #fafafa;
  color: #909399;
  font-weight: 700;
}
.grid-content {
  // border-radius: 4px;
  min-height: 46px;
  height: 46px;
  font-size: 14px;
  padding: 12px 10px;
  //   line-height: 44px;
  border-left: 1px solid rgb(235, 238, 245);
  border-top: 1px solid rgb(235, 238, 245);
}
.el-tag {
  //   text-indent: 0;
  margin-right: 12px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>